<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Source</title>
    <script src='../lib/ol6.15.1/ol.js'></script>
<!--    <link rel='stylesheet' href='../css/ol6.15.1/ol.css'>-->
    <link rel='stylesheet' href='../css/main.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #map {

        }
    </style>
</head>
<body>
<div id='map'></div>
<script>
    let layer = new ol.layer.Vector({
        /*        source: new ol.source.XYZ({
                    wrapX: false
                }),*/
        // style: [
        //     new ol.style.Style({
        //         fill: new ol.style.Fill({
        //             color: 'rgba(255,0,255,1)'
        //         })
        //     })
        // ],
        className: 'color-layer'
    });

    layer = new ol.layer.Tile({
        background: 'red',
        source: new ol.source.XYZ(),
        className: 'color-layer'
    });
    console.log(layer);
    const view = new ol.View({
        center: [0, 0],
        zoom: 2
    });
    const map = new ol.Map({
        layers: [layer],
        target: 'map',
        view
    });
</script>
</body>
</html>